<div class="row">
    <h3 class="page-title">
       Organization - <strong> Create </strong> 
    </h3>
    <div class="col-lg-12">
        <section class="widget">
            <div class="widget-body">
                <legend>
                    <button type="button" class="btn btn-info btn-sm pull-left" ng-click="back()">
                        <i class="fa fa-backward"></i>
                        <span>Back</span>
                    </button>
                </legend>
                <div class="row">
                    <div class="col-md-2">Create Organization</div>
                    <div class="col-md-10" style="border-left:1px solid #e5e5e5;padding:0 30px;margin-bottom: 30px;">
                        <!-- 
                       <div class="row" style="line-height: 4; text-align: center;">
                          <div class="col-md-4" style="background-color: #fafafa; border: 1px solid #e5e5e5;">
                               Create Organization
                          </div>
                          <div class="col-md-4" style="background-color: #fafafa; border: 1px solid #e5e5e5;">
                               Create Teams
                          </div>
                          <div class="col-md-4" style="background-color: #fafafa; border: 1px solid #e5e5e5;">
                               Invite Members
                          </div>
                       </div> -->
                        <div class="row">
                            <div class="col-lg-4 col-md-4 col-xs-12 " ng-click="gotoStep('basicInfo')" style="cursor: pointer; ">
                                <section ng-class="{widget:true, 'step-todo':step == 'basicInfo', 'step-actived':step != 'basicInfo'}" style="padding: 3px 10px;">
                                    <div class="widget-body clearfix">
                                        <div class="row flex-nowrap">
                                            <div class="col-xs-3">
                                                <span class="widget-icon">
                                                  <i ng-class="{fa:true, 'fa-users':step == 'basicInfo', 'fa-check': step != 'basicInfo'}"></i>
                                                </span>
                                            </div>
                                            <div class="col-xs-9">
                                                <h4 style="line-height: 2.1">Create Organization</h4>
                                                <!-- <p class="h4 no-margin fw-normal">Create Organization</p> -->
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                            <div class="col-lg-4 col-md-4 col-xs-12 " style="padding-left:30px;cursor: pointer;" ng-click="gotoStep('setupTeam')" ng-show="step != 'basicInfo'">
                                <!-- <section ng-class="{widget:true, 'step-todo':step.name=='basicInfo','step-actived':step.name=='setupTeam'||step.name == 'inviteMember'}" style="padding: 3px 10px;"> -->
                                <section ng-class="{widget:true, 'step-todo':step == 'setupTeam', 'step-actived':step == 'inviteMember'}" style="padding: 3px 10px;">
                                    <div class="widget-body clearfix">
                                        <div class="row flex-nowrap">
                                            <div class="col-xs-3">
                                                <span class="widget-icon">
                                                  <!-- <i class="fa fa-user"></i> -->
                                                  <i ng-class="{fa:true, 'fa-user':step == 'setupTeam', 'fa-check': step == 'inviteMember'}"></i>
                                                </span>
                                            </div>
                                            <div class="col-xs-9">
                                                 <h4 style="line-height: 2.1">Setup Team</h4>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                            <div class="col-lg-4 col-md-4 col-xs-12 " style="padding-left:30px;" ng-show="step == 'inviteMember'">
                                <section ng-class="{widget:true, 'step-todo':step=='inviteMember'}" style="padding: 3px 10px;">
                                    <div class="widget-body clearfix">
                                        <div class="row flex-nowrap">
                                            <div class="col-xs-3">
                                                <span class="widget-icon">
                                      <i class="fa fa-user"></i>
                                    </span>
                                            </div>
                                            <div class="col-xs-9">
                                                <h4 style="line-height: 2.1">Invite Members</h4>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                           
                        </div>
                        <div class="col-lg-6 col-md-6 col-xs-12 " ng-show='step == "basicInfo"' style="padding-left:0;">
                            <form novalidate="novalidate" name="OrganizationCreateForm">
                                <fieldset>
                                    <div class="form-group">
                                        <label>Name</label>
                                        <input type="text" name="nameInput" placeholder="" class="form-control" required="required" ng-model="org.name" ng-pattern="/^[A-Za-z0-9\-]+$/" ng-maxlength="25" required autofocus>
                                        <!-- <span class="help-block">Name can contain any letters or numbers, without spaces</span> -->
                                        <span class="form-error" ng-show="OrganizationCreateForm.$submitted || OrganizationCreateForm.nameInput.$touched">
                                        <span ng-if="OrganizationCreateForm.nameInput.$error.required">Name is required</span>
                                        <span ng-if="OrganizationCreateForm.nameInput.$error.pattern">Name can contain character and nubmer only</span>
                                        <span ng-if="OrganizationCreateForm.nameInput.$error.maxlength">Name mixmun length is 25 letters</span>
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <label>Description</label>
                                        <textarea class="form-control" rows="3" ng-model="org.description"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-danger" style="display: inline-block;margin-right: 20px">
                                            <label>
                                                <input type="radio" name="org-type" value="public" ng-model="org.type"> Public
                                            </label>
                                        </div>
                                        <div class="radio radio-danger" style="display: inline-block;">
                                            <label>
                                                <input type="radio" name="org-type" value="private" ng-model="org.type"> Private
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <!-- <div class="col-sm-offset-2 col-sm-10"> -->
                                        <button class="btn btn-success btn-sm" ng-click="save()" style="margin-right: 10px;" ng-disabled="OrganizationCreateForm.$invalid || OrganizationCreateForm.$pending">Save</button> 
                                        <button class="btn btn-success btn-sm" ng-click="save('setupTeam')" style="margin-right: 10px;" ng-disabled="OrganizationCreateForm.$invalid || OrganizationCreateForm.$pending">Save &amp; Create Team</button>
                                        <button class="btn btn-warning btn-sm" ng-click="cancel()">Cancel</button>
                                        <!-- </div> -->
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                        <div class="col-lg-6 col-md-6 col-xs-12 " ng-show='step == "setupTeam"' style="padding-left:0;">
                            <form novalidate="novalidate" name="TeamCreateForm">
                                <fieldset>
                                    <div class="form-group">
                                        <label>Organiztion</label>
                                        <input type="text" class="form-control" value="{{currentOrg.name}}" disabled>
                                    </div>
                                    <div class="form-group">
                                        <label>Name</label>
                                        <input type="text" name="nameInput" placeholder="" class="form-control" ng-model="team.name" ng-pattern="/^[A-Za-z0-9\-]+$/" ng-maxlength="25" required autofocus>
                                        <!--  <span class="help-block">Name can contain any letters or numbers, without spaces</span> -->
                                        <span class="form-error" ng-show="TeamCreateForm.$submitted || TeamCreateForm.nameInput.$touched">
                                        <span ng-if="TeamCreateForm.nameInput.$error.required">Name is required</span>
                                        <span ng-if="TeamCreateForm.nameInput.$error.pattern">Name can contain character and nubmer only</span>
                                        <span ng-if="TeamCreateForm.nameInput.$error.maxlength">Name mixmun length is 25 letters</span>
                                        </span>
                                    </div>
                                    <div class="form-group">
                                        <label>Description</label>
                                        <textarea class="form-control" rows="3" ng-model="team.description"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <div class="radio radio-danger" style="display: inline-block;margin-right: 20px">
                                            <label>
                                                <input type="radio" name="team-type" value="public" ng-model="team.type"> Public
                                            </label>
                                        </div>
                                        <div class="radio radio-danger" style="display: inline-block;">
                                            <label>
                                                <input type="radio" name="team-type" value="private" ng-model="team.type"> Private
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <button class="btn btn-success" ng-click="saveTeam()" ng-disabled="TeamCreateForm.$invalid || TeamCreateForm.$pending">Save Team</button>
                                         <button class="btn btn-success" ng-click="saveTeam('inviteMember')" ng-disabled="TeamCreateForm.$invalid || TeamCreateForm.$pending">Save Team &amp; Invite Member</button>
                                          <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                        <div class="col-lg-6 col-md-6 col-xs-12 " ng-show='step == "inviteMember"' style="padding-left:0;">
                            <form novalidate="novalidate" name="InviteMemberForm">
                                <div class="form-group">
                                    <label>Organiztion</label>
                                    <input type="text" class="form-control" value="{{currentOrg.name}}" disabled>
                                </div>
                                <div class="form-group">
                                    <label for="bar">Invite members to team: &nbsp;<font style="font-size:20px;color:#5dc4bf;font-weight: bold;">{{currentTeam.name}}</font></label>
                                    <div class="input-group">
                                        <input type="text" name="memberInput" class="form-control" placeholder="Invite new member by username or email" ng-model="newMember" ng-enter="saveMember()">
                                        <div class="input-group-btn">
                                            <button type="button" class="btn btn-success" ng-click="saveMember()"><i class="fa fa-plus"></i></button>
                                        </div>
                                    </div>
                                    <!--  <span class="form-error" ng-show="!newMemberValidated">
                                        <span ng-if="InviteMemberForm.memberInput.$error.required"> Member name is required</span>
                                       
                                </span> -->
                                </div>
                            </form>
                            <div class="form-group row">
                                <div class="col-md-12">
                                    <section class="widget" style="padding-left:0;">
                                        <header>
                                            <span class="label label-warning"><i class="fa fa-user"></i></span> &nbsp;Members
                                        </header>
                                        <div class="widget-body">
                                            <ul class="list-group">
                                                <li class="list-group-item" ng-repeat="member in members track by $index">{{member}}
                                                    <i class="fa fa-remove pull-right" style="color:#ccc;cursor:pointer;" ng-click="removeMember(member)"></i>
                                                </li>
                                            </ul>
                                        </div>
                                    </section>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
